<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../cwjy/css/app.css" rel="stylesheet">
    <style>
        html::-webkit-scrollbar {
            display: none
        }
    </style>
</head>
<script src="../cwjy/js/app.js"></script>
<script src="../cwjy/js/jquery.min.js"></script>
<body>
<div class="card">
    <div class="card-header">
        <div>
            <div style="float:left;">
                <span style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">订单评价管理</span>
            </div>
        </div>
        <table class="table table-striped" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th style="width:10%;text-align: center">序号</th>
                <th style="width:18%;text-align: center">订单号</th>
                <th style="width:18%;text-align: center">评论人</th>
                <th style="width:13%;text-align: center">评论内容</th>
                <th style="width:13%;text-align: center">描述相符</th>
                <th style="width:13%;text-align: center">物流服务</th>
            </tr>
            </thead>
            <tbody id="tbodyDiv">

            </tbody>
        </table>
    </div>
</div>

<!--模态框-->

<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 150%;margin-left: -25%;margin-top: 15%">
            <div class="modal-header" id="modelHead"><h3 class="modal-title" id="modelHeadText"
                                                         style="font-weight: bold;text-shadow: 1px 1px 3px #000000;">
                评论详细</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body m-3">
                <div class="card-body" id="modelDiv" style="margin-top: -2%;font-weight: bold">
                    <div class="row">
                        <ul id="productReviewsUi">


                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="modelAction">

            </div>
        </div>
    </div>
    <script type="text/javascript" src="../cwjy/js/ajaxAll.js"></script>
    <script type="text/javascript">


        let PageProductReviewsDataCache;

        function getPageProductReviews() {
            let url = "http://localhost:8888/cwjy/ProductReviews/getOrderPage";
            let json = {};
            $.ajax({
                type: 'post',
                async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: url,    //请求发送到Servlet
                contentType: 'application/json;charset=UTF-8',//指定消息请求类型
                data: JSON.stringify(json),
                timeout: 10000,    //超时10s
                success: function (res) { returnLogin(res);
                    PageProductReviewsDataCache = res.data;
                    forEachPageProductReviewsDateCache();
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert('数据请求失败!');
                }
            });
        }

       let CommentDetailsIdCache = "";
        function CommentDetails(id) {
            CommentDetailsIdCache = id;
            let data = getDataIdData(PageProductReviewsDataCache, id);
            let productReviewsUi = "";
                let temp = "     <li style=\"list-style-type:none\" id=\"top\">\n" +
                    "                                <div style=\"border-left:2px solid #f5f6f7;margin-bottom: 10px\" id = \"" + data.commentator + "," + data.id + "\">\n" +
                    "                                    <img src=\"http://localhost:8888/cwjy/images/"+data.images_file+"\" style=\"width: 30px;height: 30px;margin-right: 10px;border-radius:50%; overflow:hidden;\">\n" +
                    "                                    <span>" + data.commentator + "：</span>\n" +
                    "                                    <span>" + data.information + "\n" +
                    "                                            <a href=\"#\" class='send'>回复</a>\n" +
                    "                                            <a href=\"#\" class='delete'>删除</a>\n" +
                    "                                            </span>\n" +
                    "                                </div>\n" +
                    "                                <ul>";
                let child = data.product_reviews_list;
                let childDiv = "";
                if(child !== null){
                    for (let j = 0; j < child.length; j++) {
                        let childTemp = "<li style=\"list-style-type:none\">\n" +
                            "                                    <div style=\"margin-left: 30px;border-left:2px solid #CCC;margin-bottom: 10px\" id=\"" + child[j].commentator + "," + child[j].id + "\">\n" +
                            "                                        <img src=\"http://localhost:8888/cwjy/images/"+child[j].images_file+"\"\n" +
                            "                                             style=\"width: 30px;height: 30px;margin-right: 10px;border-radius:50%; overflow:hidden;\">\n" +
                            "                                        <span>" + child[j].commentator + " 回复 " + child[j].receiver + "：</span>\n" +
                            "                                        <span>" + child[j].information + "\n" +
                            "                                            <a href=\"#\" class='send'>回复</a>\n" +
                            "                                            <a href=\"#\" class='delete'>删除</a>\n" +
                            "                                            </span>\n" +
                            "                                    </div>\n" +
                            "                                </li>";
                        childDiv += childTemp;
                    }
                }
                temp = temp + childDiv + "\n" +
                    "                                </ul>\n" +
                    "                            </li>";
                productReviewsUi += temp;
            $('#productReviewsUi').html(productReviewsUi)
            initSendMethod();
            initDeleteMethod();
        }

        function forEachPageProductReviewsDateCache() {
            let tbodyDiv = "";
            for (let i = 0; i < PageProductReviewsDataCache.length; i++) {
                /**描述相符*/
                let descriptive_match_score = PageProductReviewsDataCache[i].descriptive_match_score;
                /**物流服务*/
                let logistics_service_score = PageProductReviewsDataCache[i].logistics_service_score;
                let descriptive_match_scoreDiv = "";
                let logistics_service_scoreDiv = "";
                for (let j = 1; j <= 5 ; j++) {
                    if(descriptive_match_score >= j){
                        let temp = " <span><button type=\"button\"  style='color: orange' data-feather=\"star\" id=\"msxf3\"></button></span>" ;
                        descriptive_match_scoreDiv += temp;
                    }else {
                        let temp = " <span><button type=\"button\"   data-feather=\"star\" id=\"msxf3\"></button></span>" ;
                        descriptive_match_scoreDiv += temp;
                    }
                    if(logistics_service_score >= j){
                        let temp = " <span><button type=\"button\"  style='color: orange' data-feather=\"star\" id=\"msxf3\"></button></span>" ;
                        logistics_service_scoreDiv += temp;
                    }else {
                        let temp = " <span><button type=\"button\"   data-feather=\"star\" id=\"msxf3\"></button></span>" ;
                        logistics_service_scoreDiv += temp;
                    }
                }





                let test = "                <td class=\"table-action\">\n" +
                    "                    <a href=\"#\"><i class=\"align-middle\" data-feather=\"eye\" data-toggle=\"modal\"\n" +
                    "                                   data-target=\"#defaultModalPrimary\" onclick=\"petOrderDetails('" + PageProductReviewsDataCache[i].id + "')\"></i></a>\n" +
                    "                    <a href=\"#\"><i class=\"align-middle\" data-feather=\"edit-2\" data-toggle=\"modal\"\n" +
                    "                                   data-target=\"#defaultModalPrimary\" onclick=\"petOrderUpdate('" + PageProductReviewsDataCache[i].id + "')\"></i></a>\n" +
                    "                    <a href=\"#\"><i class=\"align-middle\" data-feather=\"trash\" onclick=\"petOrderDelete('" + PageProductReviewsDataCache[i].id + "')\"></i></a>\n" +
                    "                </td>\n";
                let temp = "      <tr>\n" +
                    "                <td style=\"text-align: center\">" + (i + 1) + "</td>\n" +
                    "                <td style=\"text-align: center\">" + PageProductReviewsDataCache[i].order_id + "</td>\n" +
                    "                <td style=\"text-align: center\">" + PageProductReviewsDataCache[i].commentator + "</td>\n" +
                    "                <td       data-toggle=\"modal\" data-target=\"#defaultModalPrimary\" style=\"text-align: center\" onclick=\"CommentDetails('"+PageProductReviewsDataCache[i].id+"')\">" + PageProductReviewsDataCache[i].information + "</td>\n" +
                    "                <td style=\"text-align: center\"> " +
                    "             "+descriptive_match_scoreDiv+"   </td>\n" +
                    "                <td style=\"text-align: center\"> " +
                    "          "+logistics_service_scoreDiv+"      </td>\n" +
                    "            </tr>";
                tbodyDiv += temp;
            }

            $('#tbodyDiv').html(tbodyDiv)
            feather.replace();
        }

        getPageProductReviews();

        function inita() {
            let temp = "<li style=\"list-style-type:none\">\n" +
                "                                    <div style=\"margin-left: 30px;border-left:2px solid #CCC;margin-bottom: 10px\">\n" +
                "                                        <img src=\"../cwjy/img/avatars/avatar-3.jpg\"\n" +
                "                                             style=\"width: 30px;height: 30px;margin-right: 10px;border-radius:50%; overflow:hidden;\">\n" +
                "                                        <span>F1333458 回复 F1333457：</span>\n" +
                "                                        <span>asdsa\n" +
                "                                            <a href=\"#\" class='send'>回复</a>\n" +
                "                                            <a href=\"#\" class='delete'>删除</a>\n" +
                "                                            </span>\n" +
                "                                    </div>\n" +
                "                                </li>";
            $('#ulTest').append(temp)
        }

        inita();


        function cancelReply() {
            $('#hfck').remove();
        }

        function addPl() {
            $('#sendHH').unbind("click");
            $('#sendHH').click(function () {
                let commentator = $(this).parent().parent().parent().parent()[0].id;
                let idAndName = commentator.split(",");
                let isTop = $(this).parent().parent().parent().parent().parent();
                let parentSl = $(this).parent().parent().parent().parent().parent().parent();
                let sendInfo = $('#sendInfo').val();
                $('#hfck').remove();
                let temp = "<li style=\"list-style-type:none\" >\n" +
                    "                                    <div style=\"margin-left: 30px;border-left:2px solid #CCC;margin-bottom: 10px\" id='F1333458'>\n" +
                    "                                        <img src=\"../cwjy/img/avatars/avatar-3.jpg\"\n" +
                    "                                             style=\"width: 30px;height: 30px;margin-right: 10px;border-radius:50%; overflow:hidden;\">\n" +
                    "                                        <span>F1333458 回复 " + idAndName[0] + "：</span>\n" +
                    "                                        <span>" + sendInfo + "\n" +
                    "                                            <a href=\"#\" class='send'>回复</a>\n" +
                    "                                            <a href=\"#\" class='delete'>删除</a>\n" +
                    "                                            </span>\n" +
                    "                                    </div>\n" +
                    "                                </li>";
                if (isTop[0].id === 'top') {
                    isTop.children("ul").prepend(temp);
                } else {
                    parentSl.prepend(temp);
                }
                initSendMethod();
                initDeleteMethod();
                let url = "http://localhost:8888/cwjy/ProductReviews/insertSend";
                let json = {id: idAndName[1], "information": sendInfo};
                let success = "回复成功！";
                let error = "回复失败";
                ajaxUnifiedCallUpdateAndAddRemoveReload(url, json, success, error)
                getPageProductReviews();
                CommentDetails(CommentDetailsIdCache)
            })
        }


        function initDeleteMethod() {
            $('#modelDiv .delete').unbind("click");
            $('#modelDiv .delete').click(function () {
                if (confirm("是否确认删除评论！")) {
                    let idAndName = $(this).parent().parent()[0].id.split(",");
                    let url = "http://localhost:8888/cwjy/ProductReviews/deleteByPrimaryKey";
                    let json = {id: idAndName[1]};
                    let success = "删除成功！";
                    let error = "删除失败";
                    ajaxUnifiedCallUpdateAndAddRemoveReload(url, json, success, error);
                    getPageProductReviews();
                    CommentDetails(CommentDetailsIdCache)
                }
            })
        }

        function initSendMethod() {
            $('#modelDiv .send').unbind("click");
            $('#modelDiv .send').click(function () {
                $('#hfck').remove();
                let hhpl = "   <div class=\"mb-3 col-md-12\" id =\"hfck\">\n" +
                    "                                    <textarea  class=\"form-control\" id=\"sendInfo\" style=\"margin-top: 10px;height: 100px;resize: none;\"></textarea>\n" +
                    "                                    <div style=\"float: right;margin-top: 10px;width: 100%\">\n" +
                    "                                        <button type=\"button\" style=\"float: right;\" class=\"btn btn-outline-secondary\" onclick='cancelReply()'>关闭回复</button>\n" +
                    "                                        <button type=\"button\" class=\"btn btn-outline-success\" style=\"float: right;margin-right: 10px\" id='sendHH'>提交回复</button>\n" +
                    "                                    </div>\n" +
                    "                                </div>";
                $(this).parent().append(hhpl)
                addPl();
            })
        }

    </script>
</div>
</body>
</html>